<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
			<el-form-item label="角色名称" prop="roleName" v-if="path == 'add'">
				<el-input type="text" v-model="ruleForm.roleName" autocomplete="off" placeholder="请输入角色名称"></el-input>
			</el-form-item>
			<el-form-item label="角色权限设置" prop="menuList">
        <el-tree
          :data="menus"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expand-all="true"
          highlight-current
          :props="defaultProps">
        </el-tree>
			</el-form-item>
			<!-- submitForm('ruleForm') -->
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>   
				<el-button @click="handleClose('ruleForm')">取消</el-button> 
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
import { mapGetters } from 'vuex'
// api
import {
  getMenus,
  addRolePermissions,
  getRoleMenus,
  editMenus,
} from '@/api/setting'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    path: String,
  },
  data() {
    return {
      title: '新增角色',
      roleList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
			ruleForm: {
				roleName: '',
				menuList: [],
			},
			rules: {
        roleName: [
          { required: true,message: '请输入角色名称',trigger: 'blur' }
        ],
        menuList: [
          { required: true,message: '请选择角色权限',trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    ...mapGetters(
      ['menus']
    )
  },
  created() {
    console.log('this.path',this.$store.state.settings.menus)
    if(this.path == 'edit'){
      this.getdetail()
      this.title = '编辑角色'
    }
   
   
  },
  methods: {
    //获取详情
     getdetail(){
      const id = this.id
      const that = this 
        getRoleMenus(id).then(res => {
        console.log('获取详情',res)
        res.result.roleMenuList.forEach(item => {
          that.$refs.tree.setChecked(item,true,false);
        });
      }).catch(()=>{

      })
    },
    //选择树形结构
    handleTree(){
      // 所有菜单节点数据
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      console.log('checkedKeys',checkedKeys)
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      console.log('半选中的菜单节点',checkedKeys)
      this.ruleForm.menuList = checkedKeys
    },
   
    //新建角色
    submitForm(formName) {
      this.handleTree()
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          if(this.path == 'add'){
            var data = {
              ...this.ruleForm
            }
            addRolePermissions(data).then(res => {
              this.handleSuccess("创建成功")
            }).finally(() => {
              this.loading = false
            })
          }else if(this.path == 'edit'){
            var data = {
              id: this.id,
              menuList: this.ruleForm.menuList
            }
            editMenus(data).then(res => {
              this.handleSuccess("编辑成功") 
            }).finally(() => {
              this.loading = false
            })
          }
         
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

</style>
